<template>
  <div id='HomeHead'>
     <nav-bar fixed placeholder @click-right="handleSearch" z-index="999">
      <template #left>
        <router-link to="/" replace class="logoWrap">
          <img src="@/assets/logo.png" />
          <div class="title">今年头条</div>
        </router-link>
      </template>
      <template #right>
        <van-icon name="search" size="4.8vw" />
      </template>
    </nav-bar>
  </div>
</template>

<script  setup>
import { NavBar, Icon as vanIcon } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
const handleSearch = () => {
  router.push({
    path: '/search'
  })
}
</script>

<style lang='less'>
 .logoWrap {
    height: 100%;
    padding: 5px;
    display: flex;
    align-items: center;
    .title {
      color: #fff;
      font-size: 16px;

      letter-spacing: 2px;
    }
    img {
      width: 30px;
      height: 30px;
      margin-right: 5px;
    }
  }
</style>
